<template>
	<div class="user">
		<el-form class="search_form" :model="payload" label-width="80px">
			<el-row>
				<el-col :span="6">
					<el-form-item label="用户昵称" prop="nickName">
						<el-input v-model="payload.nickName" placeholder="用户昵称" />
						<el-input v-show="false" />
					</el-form-item>
				</el-col>
				<el-col :span="18" class="search_buttons">
					<el-button type="primary" @click="queryUsersList">搜索</el-button>
					<el-button plain @click="resetPayload">重置</el-button>
				</el-col>
			</el-row>
		</el-form>

		<ContentTable v-bind="tableConfig" :data="tableData" :total="total" :page="page" @currentChange="queryUsersList">
			<template #toolbar>
				<el-button type="primary" @click="handleAddClick">新 建</el-button>
			</template>
			<template #sex="{ row }">
				<DictTag :options="sys_user_sex" :value="row.sex" />
			</template>
			<template #handler="{ row }">
				<template v-if="row.id != 1">
					<el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
				</template>
			</template>
		</ContentTable>

		<el-dialog v-model="open" :title="dialogTitle" width="500" top="10vh" :before-close="handleCancel">
			<el-form ref="formRef" :model="formData" :rules="rules" label-width="90px">
				<el-form-item label="账号" prop="account">
					<el-input v-model="formData.account" placeholder="请输入账号" />
				</el-form-item>
				<el-form-item v-if="!formData.id" label="密码" prop="password">
					<el-input v-model="formData.password" placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="用户昵称" prop="nickName">
					<el-input v-model="formData.nickName" placeholder="请输入昵称" />
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-radio-group v-model="formData.sex">
						<el-radio v-for="item in sys_user_sex" :key="item.label" :label="item.value">{{ item.label }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="角色" prop="roleId">
					<el-select v-model="formData.roleId" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="formData.remark" type="textarea" rows="3" maxlength="500" show-word-limit />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
				<el-button @click="handleCancel">取 消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import ContentTable from '@/components/ContentTable'
import DictTag from '@/components/DictTag'
import { tableConfig, rules } from './config'
import { getUserList, selectRoles, insertUser, updateUser, deleteUser } from '@/service/system/user'
import { encrypt } from '@/utils/crypto'
import { ElMessage, ElMessageBox } from 'element-plus'

const { proxy } = getCurrentInstance() as any
const { sys_user_sex } = proxy.$useDict('sys_user_sex')

const payload = ref<any>({})
const tableData = ref([])
const total = ref(0)
const page = ref({ pageNum: 1, pageSize: 10 })
async function queryUsersList() {
	const result = await getUserList(payload.value)
	tableData.value = result.list
	total.value = result.total
}
queryUsersList()
function resetPayload() {
	payload.value = {}
	queryUsersList()
}

const dialogTitle = ref('')
const formData = ref<any>({ sex: '0' })
const formRef = ref()
const open = ref(false)
const options = ref<any[]>([])

async function handleAddClick() {
	const result = await selectRoles()
	options.value = result.map((item: any) => {
		return { value: item.id, label: item.roleName }
	})
	dialogTitle.value = '新建'
	open.value = true
}
function handleEdit(row: any) {
	const keys = ['id', 'account', 'nickName', 'sex', 'roleId', 'remark']
	for (const key of keys) {
		formData.value[key] = row[key]
	}
	dialogTitle.value = '编辑'
	open.value = true
}
function handleDelete(row: any) {
	ElMessageBox.confirm('确认删除此数据？', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(async () => {
			await deleteUser(row.id)
			ElMessage.success('删除成功！')
			queryUsersList()
		})
		.catch(() => {})
}
function handleCancel() {
	open.value = false
	formData.value = { sex: '0' }
	formRef.value.resetFields()
}
function handleSubmit() {
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			if (formRef.value.id) {
				await updateUser(formData.value)
				ElMessage.success('编辑成功')
				handleCancel()
				queryUsersList()
			} else {
				const password = encrypt(formData.value.password)
				formData.value.password = password
				await insertUser(formData.value)
				ElMessage.success('创建成功')
				handleCancel()
				queryUsersList()
			}
		}
	})
}
</script>

<style scoped></style>
